<template>
  <a-form-model :model="form" ref="ruleForm" :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item
  	 label="职位名称"
  	  ref="job_name"
  	   prop="job_name"
    >
  		<a-input
  		  v-model="form.job_name"
  		  @blur="
  			() => {
  			  $refs.job_name.onFieldBlur();
  			}
  		  "
  		/>
    </a-form-model-item>
    <a-form-model-item
      label="职位描述"
    >
  	<a-input
  	  v-model="form.job_dec"
  	/>
    </a-form-model-item>
    <a-form-model-item
      label="技能标签"
    >
		<a-select mode="tags" :token-separators="[',']" @change="handleChange" v-model="form.job_label">
		  <a-select-option :value="'java'">java</a-select-option>
		  <a-select-option :value="'vue'">vue</a-select-option>
		</a-select>
    </a-form-model-item>
	<a-form-model-item
	  label="招聘开始时间"
	>
		<a-date-picker v-model="form.job_start" valueFormat="YYYY-MM-DD">
	      <template slot="dateRender" slot-scope="current, today">
	        <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
	          {{ current.date() }}
	        </div>
	      </template>
	    </a-date-picker>
	</a-form-model-item>
	<a-form-model-item
	  label="招聘结束时间"
	>
		<a-date-picker v-model="form.job_stop" valueFormat="YYYY-MM-DD">
	      <template slot="dateRender" slot-scope="current, today">
	        <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
	          {{ current.date() }}
	        </div>
	      </template>
	    </a-date-picker>
	</a-form-model-item>
    <a-form-model-item
      label="职位需求"
    >
  	 <wang-editor v-model="form.job_need" @change="change"></wang-editor>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import wangEditor from '@/components/Editor/WangEditor'
import { jobCreat,jobEdit } from '@/api/job.js'

const fields = ['title', 'startAt', 'owner', 'description']

export default {
  name: 'TaskForm',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  components: {
    wangEditor
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: {
		  job_name:'',
		  job_dec:'',
		  job_need:'',
		  job_label:[],
		  job_start:'',
		  job_stop:'',
	  }
    }
  },
  mounted () {
	  if (this.record.id) {
	  	this.form = JSON.parse(JSON.stringify(this.record));
	  }
  },
  methods: {
	// 富文本编辑事件
	change(con){
		this.form.job_need = con;
	},
	   handleChange(value) {
	        console.log(`selected ${value}`);
	      },
	 getCurrentStyle(current, today) {
	   const style = {};
	  //  if (current.date() === 1) {
		 // style.border = '1px solid #1890ff';
		 // style.borderRadius = '50%';
	  //  }
	   return style;
	 },
   onOk () {
   	if(this.record.id){
   		 // 编辑
   			return new Promise(resolve => {
   				jobEdit(this.form).then(res=>{
   				  resolve(true)
   				})
   			})
   	}else{
   		 // 创建
   		 return new Promise(resolve => {
   		 	jobCreat(this.form).then(res=>{
   		 	  resolve(true)
   		 	})
   		 })
   	}
   },
    onCancel () {
      console.log('监听了 modal cancel 事件')
      return new Promise(resolve => {
        resolve(true)
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
